<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/velocity/2.0.5/velocity.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      border: 1px solid #000000;
      width: 180px;
      height: 180px;
      margin: 100px auto;
      position: relative;
    }

    .container>div {
      /* width: 60px;
      height: 60px;
      position: absolute; */
      white-space: pre-wrap;

    }

    .box0 {
      background: #04e43c;
    }

    .box1 {
      background: #112233;
    }

    .box2 {
      background: #445566;
    }

    .box3 {
      background: #778899;
    }

    .box4 {
      background: #ff456f;
    }

    .box5 {
      background: #0e5ead;
    }

    .box6 {
      background: #153311;
    }

    .box7 {
      background: #859913;
    }

    .box8 {
      background: #c40e63;
    }
  </style>
</head>

<body>

  <div class="container" id="container">
    <p></p>
    <a
      href="http://api.map.baidu.com/marker?location=31.75555836,116.50525268&title=一号位&content=所在位置的简介（可选）&output=html">百度地图</a>
    <a
      href="http://api.map.baidu.com/marker?location=31.85555836,116.50525268&title=2号位&content=所在位置的简介（可选）&output=html">百度地图</a>

    <!-- <div class="box0 box"></div>
    <div class="box1 box"></div>
    <div class="box2 box"></div> -->
    <!-- <div class="box3 box"></div> -->
    <!-- <div class="box4 box"></div>
    <div class="box5 box"></div>
    <div class="box6 box"></div>
    <div class="box7 box"></div>
    <div class="box8 box"></div> -->

  </div>
  <script type="text/javascript">
    let cont = document.getElementById('container')
    let boxs = document.querySelectorAll('.container>div')

    var Pos = [0, 60, 120];
    //判断边界
    var boundary = [30, 90, 150, 180]
    //遍历盒子排序 
    boxs.forEach((item, index) => {
      let xIdx = index % 3;
      let yIdx = parseInt(index / 3)
      item.style.left = Pos[xIdx] + 'px';
      item.style.top = Pos[yIdx] + 'px';
    })
    //给盒子添加移动监听
    boxs[0].onmousedown = function (event) {
      event = event || window.event;
      let that = this
      var nowX = this.offsetLeft;
      var nowY = this.offsetTop;
      var deltaX = event.clientX - nowX;
      var deltaY = event.clientY - nowY;

      cont.onmousemove = function (event) {
        event = event || window.event;
        event = event || window.event;
        var x = event.clientX - deltaX;
        var y = event.clientY - deltaY;

        that.style.left = x + "px";
        that.style.top = y + "px";
        adjustPos(x, y)
        document.onmouseup = () => {
          dragBack.call(that, x, y)

        }
      }
    }
    //调整位置(接收当前盒子的x,y坐标)当前
    function adjustPos(x, y) {
      let xIdx = calc(x);
      let yIdx = calc(y);
      // console.log(xIdx, boxs[xIdx + 1]);
      if (xIdx != 0) {
        console.log(xIdx)
        boxs[xIdx].style.left = 60 * (xIdx - 1) + 'px'
      }

    }
    // 计算当前调整指数
    function calc(pos) {
      let adjustIdx = null;
      boundary.reduce((pre, cur, index) => {
        // console.log(pre, cur, index)
        if (pos >= pre && pos < cur) {
          adjustIdx = index
        }
        return cur
      }, 0)
      return adjustIdx
    }
    // console.log(calc(100));
    // 如果超出就拉回
    function dragBack(x, y) {
      if (x <= 0) {
        x = 0;
      }
      if (x > 120) {
        x = 120;
      }
      if (y <= 0) {
        y = 0;
      }
      if (y > 120) {
        y = 120;
      }
      let xIdx = parseInt((x + 30) / 60);
      let yIdx = parseInt((y + 30) / 60);
      console.log(xIdx, yIdx);
      this.style.left = Pos[xIdx] + "px";
      this.style.top = Pos[yIdx] + "px";
      cont.onmousemove = null;
    }

  </script>
</body>

</html>